<template>
  <div class="main">
    <div class="dashboard">
      <MyImage />
    </div>
    <div class="button-block">
      <ButtonBlock />
    </div>
    <div class="coordinate">
      <Coordinate />
    </div>
  </div>
</template>

<script setup lang="ts">  
import Coordinate from '@/components/Coordinate.vue';
import MyImage from '@/components/myImage/MyImage.vue';
import ButtonBlock from '@/components/buttonBlock/ButtonBlock.vue';
// import { useWebSocketStore } from '@/stores/websocket';

// const wsStore = useWebSocketStore();

// const testWebSocket = () => {
//   console.log('连接WebSocket');
//   wsStore.startWebSocket(30000);
// }

// const stopWebSocket = () => {
//   console.log('断开WebSocket');
//   wsStore.stopWebSocket();
// }
</script>

<style scoped>
.main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 50px;  /* 添加间距 */
}

.dashboard {
  width: 600px;
  height: 600px;  /* 统一高度 */
}

.button-block {
  width: 200px;
  height: 600px;  /* 统一高度 */
}

.coordinate {
  width: 900px;
  height: 600px;  /* 统一高度 */
}

</style>
